<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="main.css"/>
	</head>
	<body>
		<div class="wrap">
			<!-- 主体 -->
			<div class="bg"></div>
			<div class="paly_wrap" id="player">
				<!-- 播放器头部 开始 -->
				<div class="head">
					<div class="logo fl">
						<p>黎黎播放器</p>
					</div>
					<div class="search fr">
						<input type="text" class="input_search" v-model="query" @keyup.enter="searchMusic"/>
						<i class="i_search" @click="searchMusic()"></i>
					</div>
				</div>
				<!-- 播放器头部结束 -->
				
				<!-- 播放器内容 开始 -->
				<div class="content">
					<!-- 左边 开始 -->
					<div class="music_wrapper fl">
						<ul class="music_list">
							<li v-for="(item,index) in musicList" :class="{change:index==0||index%2==0}">
								<a href="javascipt:;" class="music_start fl" @click="playMusic(item.id)"></a>
								<b class="fl">{{item.name}}-{{item.artists[0].name}}</b>
								<i class="mv_start" v-if="item.mvid!=0" @click="playMv(item.mvid)"></i>
							</li>
						</ul>
					</div>
					<!-- 左边结束 -->
					<span class="line"></span>
					<!-- 中间 开始 -->
					<div class="music_img fl">
						<img src="imgs/player_bar.png" class="disc" :class="{rotate:isPlay}">
						<img :src="musicCover" class="play_bar" :class="{rotate:isPlay}">
					</div>
					<!-- 中间 结束 -->
					<span class="line"></span>
					<!-- 右边开始 -->
					<div class="music_mes fl">
						<h4>热门留言</h4>
						<div class="hot_discuss">
							<dl v-for="item in hotComments">
								<dt><img :src="item.user.avatarUrl" alt="" class="touxiang fl"></dt>
								<dd class="name">{{item.user.nickname}}</dd>
								<dd class="detail">{{item.content }}</dd>
							</dl>
						</div>
					</div>
					<!-- 右边结束 -->
				</div>
				<!-- 播放器内容结束 -->
				
				<!-- 播放器底部 开始-->
				<div class="footer">
					<div class="music_detail">
						<a href="javascript:;" class="wordLoop" :class="{scroll:isBiger}">{{musicName}}&nbsp;&nbsp;&nbsp;&nbsp;{{musicArtist}}</a>
					</div>
					<audio ref="audio" :src="musicUrl" controls="controls" autoplay="autoplay" loop="loop" class="myaudios" @pause="pauseMusic()" @play="play()">
						当前浏览器不支持audio
					</audio>
				</div>
				<!-- 播放器底部结束 -->
				
				<!-- mv遮罩层开始 -->
				<div class="mvPlay" v-if="isShow">
					<video :src="mvUrl" controls="controls"  autoplay="autoplay" class="mv" height="600" width="1000">
						当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
					</video>
					<div class="mask" @click="hide()"></div>
				</div>
				<!-- mv遮罩层结束 -->
			</div> 
		</div>
		
		<script type="text/javascript" src="vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
